
<template>

  <div>
    <h2 style="margin:20px">教师排课表</h2>
    <!-- -----------------------------查询------------------------------------------ -->
    <div id="table-area">
      <el-form
        ref="search"
        :model="search"
        label-position="top"
      >
        <el-row
          type="flex"
          justify=""
          style="margin-top:35px"
        >
          <el-col :span="5">
            <el-form-item
              prop="day"
              style="width: 240px;"
            >
              <el-date-picker
                v-model="search.day"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                placeholder="请选择您要查看的日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-button
              type="primary"
              @click="fetchData(search)"
            >确定</el-button>
          </el-col>

        </el-row>
        <!-- ---------------------------------------------课表展示区-------------==============================---------------- -->
        <div id="table-area">
          <el-table
            :data="timeData"
            stripe
            style="width: 100%;margin-top:0px"
          >
            <el-table-column
              min-width="15%"
              label="教师"
              fixed="left"
              prop="label"
              align="center"
            />

            <el-table-column
              label="早上"
              align="center"
            >
              <el-table-column
                v-for="(v,i) in titleData"
                v-if="v.label==='早上'"
                :key="i"
                min-width="30%"
                align="center"
              >
                <template
                  slot="header"
                  slot-scope="scope"
                >
                  <div class="tabletitle-timeline">
                    第{{ v.count }}节 <br>
                    {{ v.starttime }}-{{ v.endTime }}
                  </div>
                </template>
                <template slot-scope="scope">
                  <div>
                    <div v-if="timeShow">
                      {{ scope.row[CNKey[i]] }}<br>
                      {{ scope.row[CTKey[i]] }}<br>
                      {{ scope.row[TTKey[i]] }}<br>
                      {{ scope.row[RNKey[i]] }}
                    </div>

                  </div>
                </template>
              </el-table-column>
            </el-table-column>

            <el-table-column
              label="下午"
              align="center"
            >
              <el-table-column
                v-for="(v,i) in titleData"
                v-if="v.label==='下午'"
                :key="i"
                min-width="30%"
                align="center"
              >
                <template
                  slot="header"
                  slot-scope="scope"
                >
                  <div class="tabletitle-timeline">
                    第{{ v.count }}节 <br>
                    {{ v.starttime }}-{{ v.endTime }}
                  </div>
                </template>
                <template slot-scope="scope">
                  <div>
                    <div v-if="timeShow">
                      {{ scope.row[CNKey[i]] }}<br>
                      {{ scope.row[CTKey[i]] }}<br>
                      {{ scope.row[TTKey[i]] }}<br>
                      {{ scope.row[RNKey[i]] }}
                    </div>

                  </div>
                </template>
              </el-table-column>
            </el-table-column>

            <el-table-column
              label="晚上"
              align="center"
            >
              <el-table-column
                v-for="(v,i) in titleData"
                v-if="v.label==='晚上'"
                :key="i"
                min-width="25%"
                align="center"
              >
                <template
                  slot="header"
                  slot-scope="scope"
                >
                  <div class="tabletitle-timeline">
                    第{{ v.count }}节 <br>
                    {{ v.starttime }}-{{ v.endTime }}
                  </div>
                </template>
                <template slot-scope="scope">
                  <div>
                    <div v-if="timeShow">
                      {{ scope.row[CNKey[i]] }}<br>
                      {{ scope.row[CTKey[i]] }}<br>
                      {{ scope.row[TTKey[i]] }}<br>
                      {{ scope.row[RNKey[i]] }}
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
        <!-- ---------------------------------------------课表展示区-------------==============================---------------- -->
      </el-form>
    </div>
  </div>
</template>
<script>

import { getTeacherSchedule } from '@/api/schedule'
import store from '@/store/index'
export default {
  data () {
    return {
      jurisdiction: '',
      search: {},
      staff: [],
      readValue: '',
      currentPage: 1, // 默认显示页面为1
      pagesize: 5, //    每页的数据条数
      studentId: '',
      // list: [],
      Class: [],
      listLoading: false,
      dialogFormVisible: false,
      timeShow: true, // 编辑表与展示表
      teachers: [], // 全部教师
      tableList: [],
      CNKey: ['oneCN', 'twoCN', 'threeCN', 'fourCN', 'fiveCN', 'sixCN', 'sevenCN', 'eightCN', 'nineCN', 'tenCN', 'elevenCN', 'twelveCN', 'thirteenCN'], // 科目key值
      CTKey: ['oneCT', 'twoCT', 'threeCT', 'fourCT', 'fiveCT', 'sixCT', 'sevenCT', 'eightCT', 'nineCT', 'tenCT', 'elevenCT', 'twelveCT', 'thirteenCT'], // 老师key值
      TTKey: ['oneTT', 'twoTT', 'threeTT', 'fourTT', 'fiveTT', 'sixTT', 'sevenTT', 'eightTT', 'nineTT', 'tenTT', 'elevenTT', 'twelveTT', 'thirteenTT'],
      RNKey: ['oneRN', 'twoRN', 'threeRN', 'fourRN', 'fiveRN', 'sixRN', 'sevenRN', 'eightRN', 'nineRN', 'tenRN', 'elevenRN', 'twelveRN', 'thirteenRN'],
      timeData: [],
      staff0: [],
      room: [],
      classList: {},
      belongName: '', // 班级名
      belongId: '', // 班级id
      belongType: '803', // 803表示班级，教室804
      timeId: '',
      editType: 1, // 1 添加 2 修改
      formLabelWidth: '200px ',
      // 课节数据---标题
      titleData: [],
      stAAA: [],
      weekName: [

        {
          value: 1,
          label: '周一'
        },
        {
          value: 2,
          label: '周二'
        },
        {
          value: 3,
          label: '周三'
        },
        {
          value: 4,
          label: '周四'
        },
        {
          value: 5,
          label: '周五'
        },
        {
          value: 6,
          label: '周六'
        },
        {
          value: 7,
          label: '周日'
        }
      ]

    }
  },
  computed: {
    // 根据计算属性模糊搜索
    list () {
      const searchTableInfo = this.searchTableInfo
      console.log(this.searchTableInfo)
      if (searchTableInfo) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // 注意： filter() 不会对空数组进行检测。
        // 注意： filter() 不会改变原始数组。
        return this.tableList.filter(data => {
          console.log('success' + data)
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          // 注意： some() 不会对空数组进行检测。
          // 注意： some() 不会改变原始数组。
          return Object.keys(data).some(key => {
            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
            // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
            return (
              String(data[key])
                .toLowerCase()
                .indexOf(searchTableInfo) > -1
            )
          })
        })
      }
      return this.tableList
    }
  },
  created () {
    this.jurisdiction = store.getters.roles[0]
    this.fetchData()
  },
  methods: {
    // 每页下拉显示数据
    handleSizeChange: function (size) {
      this.pagesize = size
    },
    // 点击第几页
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
    },
    handleClick (row) {
      console.log(row)
    },
    fetchData (search) {
      console.log(search, 99999)
      this.listLoading = true
      getTeacherSchedule(search).then(data => {
        console.log(search, '信息')
        this.timeData = data.data.timeData
        this.titleData = data.data.titleData
        this.listLoading = false
      })
    }

  }
}
</script>

<style scoped>
.inline-block {
  display: inline-block;
}
#main {
  margin-left: 5px;
  margin-right: 5px;
}
#table-area {
  margin-left: 10px;
  margin-right: 10px;
}
</style>
